<template>
    <div class="edit-user">
        <div class="title">
            <div class="title_text">{{type == "create" ? "新增员工" : "编辑员工信息"}}</div>
            <div class="back_btn" @click="back">&lt;&nbsp;&nbsp;返回</div>
        </div>
        <div class="basic">
            <div>基础信息<span>都为必填项</span></div>
        </div>
        <el-form
            class="basic-form"
            ref="userInfo"
            label-position="right"
            style="overflow: auto;"
            label-width="300px"
            :inline="true"
            :model="userInfo">
            <el-form-item
                label="登录账号">
                <el-input class="w300" :disabled="type == 'edit'" v-model="userInfo.loginName" placeholder=""></el-input>
            </el-form-item>
            <br>
            <el-form-item
                label="登录密码">
                <el-input class="w300" v-model="userInfo.passWord" :placeholder="type === 'edit' ? '密码不作修改则不填' : '' "></el-input>
            </el-form-item>
            <br>
            <el-form-item
                label="员工姓名">
                <el-input class="w300" v-model="userInfo.name" placeholder=""></el-input>
            </el-form-item>
            <br>
            <el-form-item
                label="员工性别">
                <el-radio class="radio" v-model="userInfo.sex" :label="1">男</el-radio>
                <el-radio class="radio" v-model="userInfo.sex" :label="0">女</el-radio>
            </el-form-item>
            <br>
            <el-form-item
                label="员工职务">
                <el-select class="w300" v-model="userInfo.position" filterable placeholder="请选择">
                    <el-option
                        v-for="item in jobOptions"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="permission-setting">
            <div>权限设置<el-checkbox v-model="checkAll" @change="handleAllCheckAllChange" style="margin-left: 20px;">全选</el-checkbox></div>
        </div>
        <el-table
            :data="permissions"
            border
            tooltip-effect="dark"
            style="width: 100%;max-height: 400px;overflow: auto;"
            >
            <el-table-column
                label="权限类型"
                width="160">
                <template slot-scope="scope">
                    <div><el-checkbox v-model="scope.row.checkAll" @change="handleCheckAllChange($event, scope.row)">{{scope.row.name}}</el-checkbox></div>
                </template>
            </el-table-column>
            <el-table-column
                label="权限名称">
                <template slot-scope="scope">
                    <div>
                        <el-checkbox-group v-model="scope.row.userpermissions" @change="handleCheckedCitiesChange(scope.row)">
                            <div v-for="permissions in scope.row.permissions" :key="permissions.menuId">
                                <el-checkbox :label="permissions.menuId">{{permissions.name}}</el-checkbox>
                            </div>
                        </el-checkbox-group>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="权限描述">
                <template slot-scope="scope">
                    <div>
                        <div v-for="permissions in scope.row.permissions" :key="permissions.menuId">
                            <div>{{permissions.desc}}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="btns">
            <el-button @click="clear">清空</el-button>
            <el-button @click="submit">提交</el-button>
        </div>
    </div>
</template>
<script>
import { saveAdminApi, inserAdminRoleApi } from "@/api/api.js";
import { getLocalStorage } from "@/utils/util.js";
export default {
    props:{
        type: {
            type: String,
            defult: ''
        },
        permissions: {
            type: Array,
            defult: []
        },
        userInfo: {
            type: Object,
            defult: {}
        }
    },
    data(){
        return{
            checkAll: false,
            loading: false,
            jobOptions: [
                '总经理', '副总经理', '财务', '运营', '技术总监', '人事专员'
            ]
        }
    },
    created() {
        // 判断传入的权限是否是全选状态
        this.isCheckAll();
    },
    methods: {
        isCheckAll(){
            console.log(this.permissions)
            let checkAll = this.permissions.every(item => {
                return item.userpermissions.length == item.permissions.length
            });
            this.checkAll = checkAll;
        },
        handleAllCheckAllChange(val){
            if (val) {
                this.permissions.map(item => {
                    console.log(item)
                    item.permissions.map(item2 => {
                        if (item.userpermissions.indexOf(item2.menuId) == -1) {
                            item.userpermissions.push(item2.menuId);
                        }
                    })
                    item.checkAll = true;
                })
            } else {
                this.permissions.map(item => {
                    item.userpermissions = [];
                    item.checkAll = false;
                })
            }
        },
        handleCheckAllChange(e, data){
            if (e) {
                let userpermissions = [];
                data.permissions.forEach(item => {
                    userpermissions.push(item.menuId);
                })
                data.userpermissions = userpermissions;
            } else {
                data.userpermissions = [];
            }
        },
        handleCheckedCitiesChange(data){
            data.checkAll =  data.permissions.length === data.userpermissions.length ;
        },
        back(type){
            this.$emit('back', type);
        },
        clear(){
            for (var attr in this.userInfo) {
                if (attr == "sex") {
                    this.userInfo[attr] = 1;
                } else if (attr == "adminId") {

                } else if (attr == "loginName"){
                    if ( this.type != "edit") {
                        this.loginName = '';
                    }
                } else {
                    this.userInfo[attr] = "";
                }
            }
            this.permissions.map(item => {
                item.checkAll = false;
                item.userpermissions = [];
            })
        },
        submit(){
            let userInfo = {
                loginName: this.userInfo.loginName,
                name: this.userInfo.name,
                sex: this.userInfo.sex,
                position: this.userInfo.position
            }
            if (this.userInfo.adminId) {
                userInfo.adminId = this.userInfo.adminId;
            }
            if (this.userInfo.passWord.trim()) {
                userInfo.passWord = this.userInfo.passWord;
            }
            saveAdminApi(userInfo).then(res => {
                if (res.code !== 200) {
                    this.$message({
                        message: res.message,
                        type: 'error'
                    });
                    return ;
                }
                this.$set(this.userInfo, "adminId", res.data)
                let params = {
                    adminId: res.data,
                    roleIds: []
                }
                this.permissions.forEach(item => {
                    if (item.userpermissions.length > 0) {
                        if (params.roleIds.indexOf(item.menuId) == -1) {
                            params.roleIds.push(item.menuId);
                        }
                        item.userpermissions.forEach(item2 => {
                            if (params.roleIds.indexOf(item2) == -1) {
                                params.roleIds.push(item2);
                            }
                        })
                    }
                })
                inserAdminRoleApi(params).then(res2 => {
                    this.$message({
                        message: this.type == "edit" ? "编辑管理员成功，刷新页面" : "新建管理员成功，刷新页面",
                        type: 'success'
                    });
                    this.back("updata");
                }).catch(err2 => {
                    // this.$message({
                    //     message: this.type == "edit" ? "编辑管理员基础信息成功，权限设置失败" : "新建管理员基础信息成功，权限设置失败",
                    //     type: 'warning'
                    // });
                    console.log(err2)
                })
            }).catch(err => {
                this.$message({
                    message: this.type == "edit" ? "编辑管理员失败" : "新建管理员失败",
                    type: 'warning'
                });
            })
        }
    }
}
</script>
<style lang="scss">
.edit-user{
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        height: 60px;
        padding: 0 20px;
        .title_text{
            height: 40px;
            line-height: 40px;
        }
        .back_btn{
            border-radius: 4px;
            // background: #B9EBEA;
            background: #51CDCB;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
        }
    }
    .basic{
        height: 60px;
        padding: 0 20px;
        border-bottom:1px solid #51CDCB;
        margin-top: 5px;
        background: #fff;
        line-height: 60px;
        div{
            span{
                color: #9a9a9a;
                margin-left: 5px;
            }
        }
    }
    .basic-form{
        padding-top: 20px;
        background: #fff;
        .el-form-item{
            margin-bottom: 5px;
        }
        .w300{
            width: 300px;
        }
    }
    .permission-setting{
        height: 60px;
        padding: 0 20px;
        margin-top: 5px;
        background: #fff;
        line-height: 60px;
    }
    .btns{
        margin: 20px 0;
        text-align: center;
        .el-button{
            margin: 0 30px;
            width: 80px;
        }
    }
}
</style>
